<template>
	<div class="app-container">
		<div class="content">
			<div class="navnum">
				<el-steps :active="1" finish-status="end" process-status='curt' class="nextnav"  simple>
				  <el-step title="导入文件" icon="iconfont icon-1" ></el-step>
				  <el-step title="批单校验" icon="iconfont icon-2"></el-step>
				  <el-step title="结算完成" icon="iconfont icon-3"></el-step>
				</el-steps>
				<div class="list-tab">
		          <div class="tab" @click="gopidan">下游保单结算</div>
		          <div class="tab now">下游批单结算</div>
		           <div class="tab" @click="goedit">下游结算批改</div>
		   </div>
<<<<<<< .mine
			<div style="display:flex;justify-content: center;">
||||||| .r1403
			<div style="display:flex;justify-content: center;">
=======
			</div>
			
			<div style="display:flex;justify-content: center;">
>>>>>>> .r1409
					<el-form label-width="100px" class="upsettle-form1 marginTop" :model="formData" :rules="rules" ref="formData">
				<div class="form_top">
				<!--出单时间范围-->
					<el-form-item label="批单时间：" class="is-required" prop="value">
						<div class="input_wp">
							<el-date-picker class="wd300" format='yyyy-MM-dd' value-format='yyyy-MM-dd' size='mini' v-model="formData.value" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" >
							</el-date-picker>
							<div style="display: none;">
								<el-input type="hidden" v-model="formData.value"></el-input>
							</div>
						</div>		           
					</el-form-item>
					
					<!--组织部门-->
						<el-form-item label="组织部门：" class="" prop="orgs">
						<ztree-select class="wd300 setB" v-model="formData.organizationUnitId" :treedata="treeData" :childprops="childprops" @change='setSelectedId'></ztree-select>			          
					</el-form-item>
					
					
					<el-form-item label="保险公司：" class="" prop="insuranceId">
						<div class="input_wp">
							<el-select class="wd300" size="mini" v-model="formData.insuranceId" placeholder="请选择结算公司" @change="changeIns(formData.insuranceId)">
								<el-option-group v-for="group in companies" :key="group.letter" :label="group.letter">
									<el-option v-for="item in group.insurances" :key="item.id" :label="item.insuranceName" :value="item.id">
									</el-option>
								</el-option-group>
							</el-select>
						</div>
					
					</el-form-item>
					
					<!--工号-->
					<!--<el-form-item label="工号：" class="" prop="staffId">
						<div class="input_wp">
							<el-checkbox-group v-model="formData.staffId" size="mini" @change="staffIdC(staffId)">
							<el-checkbox-button v-for="item in staffId" :label="item.staffAccount" :key="item.id" :value="item.id"></el-checkbox-button>
							</el-checkbox-group>						 
						</div>		           
					</el-form-item>-->
					
					<el-form-item label="工号：" prop="staffId">
						<el-select class="wd300" v-model="formData.staffId" size="mini" placeholder="请选择适用工号">
							<el-option
							v-for="item in staffId"
							:key="item.id"
							:label="item.staffAccount"
							:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					
					
					<!--保单类型-->
					<div class="typeWp">
					<el-form-item label="保单类型：" class="is-required" prop="insuranceType">
						<div class="input_wp">
							<!--<el-checkbox-group v-model="formData.insuranceType" size="mini" @change="insuranceTypeC(formData.insuranceType)">
							<el-checkbox-button v-for="item in insuranceType" :label="item.label" :key="item.value"></el-checkbox-button>
							</el-checkbox-group>					 -->
							<el-checkbox-group v-model="formData.insuranceType" size="mini" >
							<el-checkbox-button v-for="insuranceType in insuranceType" :label="insuranceType" :key="insuranceType">{{insuranceType}}</el-checkbox-button>
							</el-checkbox-group>
						</div>		           
					</el-form-item>
					</div>
					</div>
					
					<!--下一步-->
					<el-form-item class='btn-item'>
						<el-button type="primary" class="submitBtn" @click="toNext('formData')"  size="small"  :loading='isloading'>下一步</el-button>
					</el-form-item>
					
				</el-form>
			</div>
			<!--form-->
			<!--<el-tabs type="border-card"  v-model="activeName" style='width:800px;margin:0 auto;min-height:550px;' @tab-click="handleClick">
				<el-tab-pane label="上游批单结算" name='up'>
				</el-tab-pane>
				<el-tab-pane label="下游批单结算" name='down'>
					
				<el-form label-width="100px" class="upsettle-form1 marginTop" :model="formData" :rules="rules" ref="formData">
				<div class="form_top">
				
					<el-form-item label="批单时间：" class="is-required" prop="value">
						<div class="input_wp">
							<el-date-picker class="wd300" format='yyyy-MM-dd' value-format='yyyy-MM-dd' size='mini' v-model="formData.value" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" >
							</el-date-picker>
							<div style="display: none;">
								<el-input type="hidden" v-model="formData.value"></el-input>
							</div>
						</div>		           
					</el-form-item>
					
					
						<el-form-item label="组织部门：" class="" prop="orgs">
						<ztree-select class="wd300 setB" v-model="formData.organizationUnitId" :treedata="treeData" :childprops="childprops" @change='setSelectedId'></ztree-select>			          
					</el-form-item>
					
					
					<el-form-item label="保险公司：" class="" prop="insuranceId">
						<div class="input_wp">
							<el-select class="wd300" size="mini" v-model="formData.insuranceId" placeholder="请选择结算公司" @change="changeIns(formData.insuranceId)">
								<el-option-group v-for="group in companies" :key="group.letter" :label="group.letter">
									<el-option v-for="item in group.insurances" :key="item.id" :label="item.insuranceName" :value="item.id">
									</el-option>
								</el-option-group>
							</el-select>
						</div>
					
					</el-form-item>
					
					
					
					
					<el-form-item label="工号：" prop="staffId">
						<el-select class="wd300" v-model="formData.staffId" size="mini" placeholder="请选择适用工号">
							<el-option
							v-for="item in staffId"
							:key="item.id"
							:label="item.staffAccount"
							:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					
					
				
					<div class="typeWp">
					<el-form-item label="保单类型：" class="is-required" prop="insuranceType">
						<div class="input_wp">
							
							<el-checkbox-group v-model="formData.insuranceType" size="mini" >
							<el-checkbox-button v-for="insuranceType in insuranceType" :label="insuranceType" :key="insuranceType">{{insuranceType}}</el-checkbox-button>
							</el-checkbox-group>
						</div>		           
					</el-form-item>
					</div>
					</div>
					
					
					<el-form-item class='btn-item'>
						<el-button type="primary" class="submitBtn" @click="toNext('formData')"  size="small"  :loading='isloading'>下一步</el-button>
					</el-form-item>
					
				</el-form>
				</el-tab-pane>
			</el-tabs>
		-->
		
		
		<div style="height:100px;"></div>
		</div>
	</div>
</template>
	
<script>
	import Vue from 'vue';
	import treeSelect from "@/components/tree-select/tree.vue";
	import ztreeSelect from "@/components/z-select/index.vue";
	
	export default{
		components: {
	        treeSelect,
	        ztreeSelect
	    },
		data(){
			const insuranceTypes = ['商业', '交强'];
			return{
				companies:[],
				//数组子级相关参数
			      childprops: {
			        name: "displayName", //显示名字
			        children: "orgs", //子级字段名
			        lv: "depth" //当前层级
			      },
				formData:{
					insuranceId:null,
					value:'',
					staffId:'',
					insuranceType:['商业','交强']
				},
				rules:{
					value: [{
						required: true,
						message: '请选择出单时间',
						trigger: 'change'
					}],
					insuranceType:[{
						type:'array',
						required: true,
						message: '请至少选择一个保单类型',
						trigger: 'change'
					}]
				},
				role:'不限',
				isloading:false,
				units:null,
			    options:[{value:1,label:'111'}],
			    getDay:'',
			    unitsprops: {
			        value: "id",
			        children: "organizationUnits",
			        label: "displayName"
			     },
			    treeData:[],
			    treeProps1: {
		              label: "displayName",
		              children: "orgs",
		              level: "depth",
		              value:'id'
		      	},
			    staffList:null,
			    roleList:[],
			    salesman:null,
			    staffId:null,
			    insuranceId:null,
				insuranceType:insuranceTypes,
				activeName: "down",
			}
		},
		
		mounted(){
			this.getUnits()
			// this.getCompanies()
			this.getDateChange()
			this.getUserList()	
		},
		methods:{
			gopidan(){
				this.$router.push({
		  			name:"financedown"
		  		})
			},
			goedit(){
				this.$router.push({
		  			name:"SettlementAmendment1"
		  		})
			},
			handleClick(tab,event){
				console.log(tab);
				console.log(tab.name);	
				if(tab.name == 'up')	{
					this.$router.push({
						name:'upperendorsement1'
					})
				}
			},
			//组织机构
			getUnits(){
		      let params = {
						queryType: 1
					};
		      this.post(params, "services/app/common/GetCurrentOrganizationUnitsByType").then(
		        rs => {
		          console.log("组织机构"+rs);
		          if (rs.success) {
		            let data = rs.result;
		            let arr = [];
		            arr.push(data);
		            this.treeData = arr;
		            // console.log(rs.result);
		            // console.log(this.treeData);
		            // console.log('-----------');
		          }
		        }
		      );
		    },

		    //时间控件
		    getDateChange(){
		  		var changeDate = new Date();
		  		var changeYear = changeDate.getFullYear();
		  		var changeMonth = changeDate.getMonth();
		  		var changeDay = changeDate.getDay();
		  		console.log(changeYear + '-' + changeMonth + '-' + changeDay);
		  		this.getDay = changeYear + '-' + changeMonth + '-' + changeDay;
		  	},
		    //获取保险公司
		    // getCompanies() {
		    //   const that = this
		    //   const params = {}
		    //   this.post(params, 'services/app/common/GetGroupInsurances').then(rs => {
		    //     console.log(rs)
		    //     if (rs.success) {
		    //       that.companies = rs.result.items
		    //     }
		    //   })
		    // },
		    //选择保险公司获取工号列表
		  	changeIns(val){
		  		this.insuranceId = val;
		  		let params = {
		  			id:val
		  		}
		  		this.post(params, 'services/app/common/GetCurrentInsuranceStaffs').then(rs => {
			        console.log(rs)
			        if (rs.success) {
			        	
			          	this.staffId = rs.result.items;
			          	for(var i = 0; i < this.staffId.length; i++) {
							if(this.staffId[i].describe != "") {
								this.staffId[i].staffAccount = this.staffId[i].staffAccount + " (" + this.staffId[i].describe + ")"
							} else {
								this.staffId[i].staffAccount = this.staffId[i].staffAccount
							}
						}
			          	this.staffId.unshift({
			          		staffAccount:'不限'
			          	})
			          	console.log(this.staffId)
			        }
			    })
		  	},
		    //选择组织
		    setSelectedId(val) {
			//   console.log(val);
				Vue.set(this.formData,"salesman",'')
	          this.formData.organizationUnitId=val;
	          
	           let params = {
					organzationId: val
				};
				this.post(params, "services/app/common/CurrentBusinessAscription").then(rs => {
				
				if (rs.success) {
					let result = rs.result.items;
					this.roleList = result;
					// this.formData.salesman=rs.result.items[0].organzationId
				}
				});
			},
			getUserList(){
					this.post({}, "services/app/common/CurrentBusinessAscription").then(rs => {
						
				if (rs.success) {
				let result = rs.result.items;
							this.roleList = result;
							//  this.formLabel.UserId=rs.result.items[0].organzationId
					
				}
			});
			},
	        
	        //下一步
	        toNext(formName){
	        	//console.log(this.formData);
				let params = {};
	        	this.$refs[formName].validate((valid) => {
	        		if (valid) {
	        			this.isloading=true;
	        			let startTime,endTime;
			        		startTime = this.formData.value[0];
			        		endTime = this.formData.value[1];
						//let insuranceTypeGo = this.formData.insuranceType;
			        	var insuranceTypeGo = '';
			        	var typess = ''
			        	this.formData.insuranceType.forEach(item=>{
			        		if (item=='商业') {
			        			typess = 1
			        		}
			        		if (item=='交强') {
			        			typess = 2
			        		}
			        		insuranceTypeGo += typess + ','
			        	})
			        	var insType = (insuranceTypeGo .substring(insuranceTypeGo .length - 1) == ',') ? insuranceTypeGo .substring(0, insuranceTypeGo .length - 1) : insuranceTypeGo;
			        	console.log(insType)
			        	let params = {
			        		signBeginDate:startTime,
			        		signEndDate:endTime,
			        		organizationUnitId:this.formData.organizationUnitId,
			        		staffId:this.formData.staffId,
			        		insuranceType:insType,
			        		insuranceId:this.formData.insuranceId
			        	}
						console.log(params)
			        	this.post(params,'services/app/correctGuaranteeSlip/GetLowerCorrectGuaranteeSlips').then(res=>{
			        		let that = this;
			        		if (res.success) {
			        			//let id = res.result.batchId;
			        			let startTime,endTime;
			        			startTime = this.formData.value[0];
			        			endTime = this.formData.value[1];
			        			this.isloading=false;
			        			this.$router.push({
									name: "downendorsement2",
									query: {
										id: res.result.batchId,
										signBeginDate:startTime,
						        		signEndDate:endTime,
						        		organizationUnitId:this.formData.organizationUnitId,
						        		// salesman:this.formData.salesman,
						        		staffId:this.formData.staffId,
						        		insuranceType:insType,
						        		insuranceId:this.formData.insuranceId
									}
								})
			        		}else{
						    	const h = this.$createElement;
						    	this.isloading=false;
						      	this.$notify.error({
						          title: '错误',
						          message: res.error.message,
						          duration: 0,
						          customClass:"el-notification-error"
						        });
			        		}
			        	})
	        		}
	        	})
	        	
	        	console.log(params)
	        },
		}
	}
</script>

<style  lang="scss" scoped>
.marginTop{
	margin-top:30px;
}
.setB{margin-bottom:12px;}
.navnum{margin-top: 55px;padding: 0 20px;margin-bottom: 20px;}
.el-steps--simple{padding: 17px 8%;}
.el-form{
	.form_top{
		width:550px;
	
		// margin: 0 auto;
	}
	.input_wp{
		margin-bottom: 12px;
		.fontsize12{font-size: 12px;}
	}
	.modeP,.modeP_txt{display: inline-block;}
	.modeP_txt{margin-left: 106px;color: #CF1322;;margin-top: -6px;margin-bottom: 0;}
	.wd300{width: 300px;}
	.hei28{height: 28px;line-height: 28px;padding: 0;margin: 0;color: #666;
		letter-spacing: 0;font-size: 12px;
		.acolor{color: #027dca;}
		.acolor:hover{text-decoration: underline;}
		.iconColor{color: #FF9430;cursor: pointer;}
	}
	.uploadTxt{display: inline-block;position: relative;top: -10px;margin-left: 20px;color: #666666;font-size: 13px;}
	.floatLeft{float: left;display: block;}
	.submitBtn{margin: 0 auto;margin-left: -100px;}
	.btn-item{margin-top: 100px;margin-bottom: 246px !important;text-align: center;}
	.el-form-item{margin-bottom: 14px !important;}
	
	.typeWp{margin-top: 28px;}
	
	
}
.list-tab {
        padding: 0 20px;
        box-border: border;
        border-bottom: 1px solid #cbcbcb;
       margin-top:20px;
        .tab {
          display: inline-block;
          padding: 0 10px;
          line-height: 40px;
          text-align: center;
          color: #333;
          cursor: pointer;
          margin-bottom: -1px;
          span {
            color: #999;
          }
        }
        .now {
          color: #ff7819 !important;
          background: url(../../../assets/images/bomactive2x.png) center 32px
            no-repeat;
          span {
            color: #ff7819 !important;
          }
        }
      }
.upsettle-form1{padding-bottom: 100px;}
</style>
<style type="text/css">
	.el-step__head.is-curt,.el-step__title.is-curt{color: #c0c4cc;}
	.upsettle-form1 .ats-tree .el-input__inner{width: 300px !important;}
	.upsettle-form1 .ats-tree .ats-tree-scrollbar{min-width: 300px;}
	.form_top .el-form-item__error{margin-top: -10px !important;}
</style>